<template>
	<view ref="objBox" style="touch-action: none">
		<!-- 动画操作区 -->
		<div v-show="false" id="donghuaBox"
			style="position: absolute;top:80px;left:0px;z-index: 999999999999999;visibility:visible;color: white;">
			<div id="donghua_bixin" @click="playAnimation('donghua_bixin')">比心</div>
			<div id="donghua_daiji" @click="playAnimation('donghua_daiji')">待机</div>
			<div id="donghua_fanu" @click="playAnimation('donghua_fanu')">发怒[30`]</div>
			<div id="donghua_jubei" @click="playAnimation('donghua_jubei')">举杯</div>
			<div id="donghua_keai" @click="playAnimation('donghua_keai')">可爱</div>
			<div id="donghua_ku" @click="playAnimation('donghua_ku')">哭</div>
			<div id="donghua_shuohua" @click="playAnimation('donghua_shuohua')">说话</div>
		</div>

		<!-- canvas画布区 -->
		<view class="webgl" id="mifengCanvasBox" style="padding-top: 0px; box-sizing: border-box;"></view>
	</view>
</template>

<script module="three" lang="renderjs">
	import * as THREE from 'three';
	import TWEEN from '@tweenjs/tween.js';
	import {
		OrbitControls
	} from 'three/examples/jsm/controls/OrbitControls.js';
	import {
		DragControls
	} from 'three/examples/jsm/controls/DragControls.js';
	import {
		GUI
	} from 'three/examples/jsm/libs/lil-gui.module.min.js';

	let scene = null;
	let camera = null;

	let controls = null;
	let animations = null;
	let teacherFlame = null;
	let animation1Count = 0; // 记录第一个动画播放次数
	let currentAnimationId;
	var roleWidth = 312;
	var roleHeight = 324;

	var rat = 1024 / 1366;
	if (rat = 1) {

	}

	export default {
		// props: ['word', 'positiony', 'canvaswidth', 'canvasheight'], // 声明接收来自父组件的prop
		data() {
			return {
				edit: 0, //为1的时候用来调试
				title: 'game_word_link',
				screenWidth: 0,
				marginTop: 0,
				marginLeft: 0,

				word: 'apple',
				canvaswidth: 300,
				canvasheight: 300,
				roleWidth: roleWidth,
				roleHeight: roleHeight,
				rat: 2.8,

				donghua: 'donghua_daiji',
				lock: false,
			}
		},
		watch: {
			donghua(newVal, oldVal) {
				var that = this;
				// console.log(`Message changed from ${oldVal} to ${newVal}`);
				// 你可以在这里执行更多的操作，比如发送请求、处理数据等

				that.playAnimation(newVal)
			}
		},
		// computed: {
		// 	positiony: function() {
		// 		return -this.roleWidth * this.rat / 2;
		// 	}
		// },
		mounted() {
			let that = this;

			const donghuaType = document.querySelector('.donghuaType');
			if (donghuaType) {
				setInterval(function() {
					that.donghua = donghuaType.innerText;
				}, 100)
			}

			// 默认
			that.rat = 1.16;
			that.positiony = -this.roleWidth * this.rat / 1.98;

			console.log('-----------------2-------------------------')
			console.log('------------------------------------------')
			console.log(uni.getSystemInfoSync().screenWidth, uni.getSystemInfoSync().screenHeight)

			that.$nextTick(() => {
				const platform = uni.getSystemInfoSync().platform;
				if (platform === 'h5') {
					// 在H5环境中
					// 执行相应操作
					// const query = uni.createSelectorQuery().in(that);
					// query.select('.webgl').boundingClientRect(data => {
					// 	that.marginTop = data.top;
					// 	that.marginLeft = data.left;
					// 	that.canvasWidth = data.width;
					// 	that.init()
					// }).exec();
				} else if (platform === 'mp-alipay' || platform === 'mp-weixin' || platform === 'mp-baidu' ||
					platform === 'mp-toutiao') {
					// 在小程序环境中
					// 执行相应操作
				} else if (platform === 'android' || platform === 'ios') {
					// 在App环境中
					// 执行相应操作1
					const canvas = document.querySelector('.mifeng');
					const rect = canvas.getBoundingClientRect();
					// console.log("==============rectaaa==============", JSON.stringify(rect));
					that.marginLeft = rect.left;
					that.canvaswidth = rect.width;
					that.canvasheight = rect.height;

					that.init();
				}
			});
		},
		methods: {
			init() {
				var that = this;

				console.log(that.positiony)

				// 创建一个包含参数的对象
				controls = {
					// 老师
					teacherFlameX: localStorage.getItem('teacherFlameX') ? parseFloat(localStorage.getItem(
						'teacherFlameX')) : 16.16,
					teacherFlameY: parseFloat(that.positiony),

					// 速度
					speed_bixin: localStorage.getItem('speed_bixin') ? parseFloat(localStorage.getItem(
						'speed_bixin')) : 0.06,
					speed_daiji: localStorage.getItem('speed_daiji') ? parseFloat(localStorage.getItem(
						'speed_daiji')) : 0.28,
					speed_fanu: localStorage.getItem('speed_fanu') ? parseFloat(localStorage.getItem('speed_fanu')) :
						0.16,
					speed_jubei: localStorage.getItem('speed_jubei') ? parseFloat(localStorage.getItem(
						'speed_jubei')) : 0.18,
					speed_keai: localStorage.getItem('speed_keai') ? parseFloat(localStorage.getItem('speed_keai')) :
						0.34,
					speed_ku: localStorage.getItem('speed_ku') ? parseFloat(localStorage.getItem('speed_ku')) : 0.23,
					speed_shuohua: localStorage.getItem('speed_shuohua') ? parseFloat(localStorage.getItem(
						'speed_shuohua')) : 0.23,
				};

				let fontSize = 55;
				let bottomMaxWidth = window.innerWidth;
				let meshObjects = [] //3D 物体的拖动
				let selectedObject = null; //CSS3DRenderer 和 CSS2DRenderer
				let offset = new THREE.Vector2();
				let gui = new GUI(); //创建GUI对象
				let shuohua_status = false;

				//场景
				const scene = new THREE.Scene();
				// const bgtextureLoader = new THREE.TextureLoader();
				// const texture = bgtextureLoader.load('https://cdn.spbcn.org/jzy/app/test_end_new.png');
				// scene.background = texture; // 将加载的图片作为场景的背景

				//辅助观察的坐标系
				const axesHelper = new THREE.AxesHelper(100);
				// scene.add(axesHelper);

				//光源设置
				const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
				directionalLight.position.set(100, 60, 50);
				scene.add(directionalLight);
				const ambient = new THREE.AmbientLight(0xffffff, 0.4);
				scene.add(ambient);

				//相机
				const width = that.canvaswidth;
				const height = that.canvasheight;
				const camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000);
				camera.position.set(0, 0, 700);
				camera.lookAt(0, 0, 700);

				// WebGL渲染器设置
				const renderer = new THREE.WebGLRenderer({
					antialias: true, //开启优化锯齿
					alpha: true
				});


				renderer.setSize(width, height);
				renderer.setPixelRatio(window.devicePixelRatio); //防止输出模糊
				renderer.outputEncoding = THREE.sRGBEncoding;

				const gl = renderer.getContext();
				const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
				// console.log('Maximum texture size supported by the GPU: ' + maxTextureSize);

				//three.js执行渲染命令会输出一个canvas画布，也就是一个HTML元素，你可以插入到web页面中
				document.getElementById('mifengCanvasBox').appendChild(renderer.domElement);



				// if('动画'){
				var handlerList = ['animation1', 'animation2'];
				let currentAnimation = null;


				// 假设有两个序列帧动画的纹理图集
				const texture_bixin = new THREE.TextureLoader().load(
					'https://cdn.spbcn.org/jzy/biaoqing/bixin.png'); //10
				const texture_daiji = new THREE.TextureLoader().load(
					'https://cdn.spbcn.org/jzy/biaoqing/daiji.png'); //11

				// texture_daiji.minFilter = THREE.LinearFilter;
				// texture_daiji.maxFilter = THREE.LinearFilter;
				// texture_daiji.needsUpdate = true;

				const texture_fanu = new THREE.TextureLoader().load(
					'https://cdn.spbcn.org/jzy/biaoqing/fanu.png'); //16
				const texture_jubei = new THREE.TextureLoader().load(
					'https://cdn.spbcn.org/jzy/biaoqing/jubei.png'); //25
				const texture_keai = new THREE.TextureLoader().load(
					'https://cdn.spbcn.org/jzy/biaoqing/keai.png'); //11
				const texture_ku = new THREE.TextureLoader().load('https://cdn.spbcn.org/jzy/biaoqing/ku.png'); //15
				const texture_shuohua = new THREE.TextureLoader().load(
					'https://cdn.spbcn.org/jzy/biaoqing/shuohua.png'); //12
				texture_bixin.repeat.set(1 / 10, 1); // 1/num：从图像上截图一帧火焰
				texture_daiji.repeat.set(1 / 11, 1); // 1/num：从图像上截图一帧火焰
				texture_fanu.repeat.set(1 / 16, 1); // 1/num：从图像上截图一帧火焰
				texture_jubei.repeat.set(1 / 25, 1); // 1/num：从图像上截图一帧火焰
				texture_keai.repeat.set(1 / 11, 1); // 1/num：从图像上截图一帧火焰
				texture_ku.repeat.set(1 / 15, 1); // 1/num：从图像上截图一帧火焰
				texture_shuohua.repeat.set(1 / 12, 1); // 1/num：从图像上截图一帧火焰

				// 创建两个材质
				const material_bixin = new THREE.MeshBasicMaterial({
					map: texture_bixin,
					transparent: true,
					// opacity: 0.4,
					side: THREE.DoubleSide,
					depthWrite: false,
				});
				const material_daiji = new THREE.MeshBasicMaterial({
					map: texture_daiji,
					transparent: true,
					// opacity: 0.4,
					side: THREE.DoubleSide,
					depthWrite: false,
				});
				const material_fanu = new THREE.MeshBasicMaterial({
					map: texture_fanu,
					transparent: true,
					// opacity: 0.4,
					side: THREE.DoubleSide,
					depthWrite: false,
				});
				const material_jubei = new THREE.MeshBasicMaterial({
					map: texture_jubei,
					transparent: true,
					// opacity: 0.4,
					side: THREE.DoubleSide,
					depthWrite: false,
				});
				const material_keai = new THREE.MeshBasicMaterial({
					map: texture_keai,
					transparent: true,
					// opacity: 0.4,
					side: THREE.DoubleSide,
					depthWrite: false,
				});
				const material_ku = new THREE.MeshBasicMaterial({
					map: texture_ku,
					transparent: true,
					// opacity: 0.4,
					side: THREE.DoubleSide,
					depthWrite: false,
				});
				const material_shuohua = new THREE.MeshBasicMaterial({
					map: texture_shuohua,
					transparent: true,
					// opacity: 0.4,
					side: THREE.DoubleSide,
					depthWrite: false,
				});

				// 创建动画对象
				animations = {
					donghua_bixin: {
						material: material_bixin,
						startFrame: 0,
						endFrame: 10,
						speed: controls.speed_bixin,
						onStart: null,
						onEnd: null
					},
					donghua_daiji: {
						material: material_daiji,
						startFrame: 0,
						endFrame: 11,
						speed: controls.speed_daiji,
						onStart: null,
						onEnd: null
					},
					donghua_fanu: {
						material: material_fanu,
						startFrame: 0,
						endFrame: 16,
						speed: controls.speed_fanu,
						onStart: null,
						onEnd: null
					},
					donghua_jubei: {
						material: material_jubei,
						startFrame: 0,
						endFrame: 25,
						speed: controls.speed_jubei,
						onStart: null,
						onEnd: null
					},
					donghua_keai: {
						material: material_keai,
						startFrame: 0,
						endFrame: 11,
						speed: controls.speed_keai,
						onStart: null,
						onEnd: null
					},
					donghua_ku: {
						material: material_ku,
						startFrame: 0,
						endFrame: 15,
						speed: controls.speed_ku,
						onStart: null,
						onEnd: null
					},
					donghua_shuohua: {
						material: material_shuohua,
						startFrame: 0,
						endFrame: 12,
						speed: controls.speed_shuohua,
						onStart: null,
						onEnd: null
					},
				};



				// 设置每个动画的开始和结束回调函数
				animations.donghua_bixin.onStart = () => {
					// console.log('Animation 1 started');
				};

				animations.donghua_bixin.onEnd = () => {
					// console.log('Animation 1 ended');
					setTimeout(function() {
						that.playAnimation('donghua_daiji');
					})
				};

				animations.donghua_daiji.onStart = () => {
					animation1Count++;
					// console.log('Animation 2 started');
				};

				animations.donghua_daiji.onEnd = () => {
					// console.log('Animation 2 ended');
					setTimeout(function() {
						that.playAnimation('donghua_daiji');
					})
				};

				animations.donghua_fanu.onStart = () => {
					animation1Count++;
					// console.log('Animation 3 started');
				};

				animations.donghua_fanu.onEnd = () => {
					// console.log('Animation 3 ended');
					setTimeout(function() {
						that.playAnimation('donghua_daiji');
					})
				};

				animations.donghua_jubei.onStart = () => {
					animation1Count++;
					// console.log('Animation 3 started');
				};

				animations.donghua_jubei.onEnd = () => {
					// console.log('Animation 3 ended');
					that.lock = false;
					setTimeout(function() {
						that.playAnimation('donghua_jubei');
					})
				};

				animations.donghua_keai.onStart = () => {
					animation1Count++;
					// console.log('Animation 3 started');
				};

				animations.donghua_keai.onEnd = () => {
					// console.log('Animation 3 ended');
					setTimeout(function() {
						that.playAnimation('donghua_daiji');
					})
				};

				animations.donghua_ku.onStart = () => {
					animation1Count++;
					// console.log('Animation 3 started');
				};

				animations.donghua_ku.onEnd = () => {
					// console.log('Animation 3 ended');
					setTimeout(function() {
						that.playAnimation('donghua_daiji');
					})
				};

				animations.donghua_shuohua.onStart = () => {
					animation1Count++;
					// console.log('Animation 3 started');
				};

				animations.donghua_shuohua.onEnd = () => {
					// console.log('Animation 3 ended');
					setTimeout(function() {
						that.playAnimation(that.donghua);
					})
				};

				// 初始化模型
				var w = roleWidth * that.rat; //火焰宽度  通过参数w可以快速调节火焰大小，以便于适应对应的三维场景
				var h = w * roleHeight / roleWidth; //火焰高度
				const geometry = new THREE.PlaneGeometry(w, h);
				geometry.translate(0, h / 2, 0);
				material_daiji.map.encoding = THREE.sRGBEncoding;
				material_shuohua.map.encoding = THREE.sRGBEncoding;
				material_keai.map.encoding = THREE.sRGBEncoding;
				material_ku.map.encoding = THREE.sRGBEncoding;
				material_bixin.map.encoding = THREE.sRGBEncoding;
				material_fanu.map.encoding = THREE.sRGBEncoding;
				material_jubei.map.encoding = THREE.sRGBEncoding;

				teacherFlame = new THREE.Mesh(geometry, material_daiji);
				teacherFlame.scale.set(0.7, 0.7, 0.7);
				teacherFlame.position.x = localStorage.getItem('teacherFlameX');
				teacherFlame.position.y = that.positiony;
				scene.add(teacherFlame);






				// 调用 playAnimation('animation1') 可以播放第一个序列帧动画
				// 调用 playAnimation('animation2') 可以播放第二个序列帧动画

				// playAnimation('animation2');

				// setTimeout(function () {
				that.playAnimation('donghua_daiji');
				// }

				// var orbitControls = new OrbitControls(camera, renderer.domElement);
				// var dragControls = new DragControls(meshObjects, camera, renderer.domElement);
				// dragControls.addEventListener('dragstart', function(event) {
				// 	// 拖动开始时的操作
				// 	console.log('Drag started');
				// });

				// dragControls.addEventListener('drag', function(event) {
				// 	console.log('Drag starting');
				// 	var selectedObject = event.object; // 获取当前被拖动的物体
				// 	if (selectedObject.name == 'teacher') {
				// 		var worldPosition = new THREE.Vector3();
				// 		selectedObject.getWorldPosition(worldPosition);
				// 		localStorage.setItem('teacherFlameX', worldPosition.x);
				// 		localStorage.setItem('teacherFlameY', worldPosition.y);
				// 	}
				// });

				// dragControls.addEventListener('dragend', function(event) {
				// 	// 拖动结束时的操作
				// 	console.log('Drag ended');
				// });


				// 将参数添加到 GUI 控件中
				// var folder = gui.addFolder('气泡框');
				var folder4 = gui.addFolder('老师');
				folder4.add(controls, 'teacherFlameX', -window.innerWidth / 2 - 100, window.innerWidth / 2).onChange(
					function(value) {
						teacherFlame.position.x = value;
						localStorage.setItem('teacherFlameX', value)
					}).name('X移动');
				folder4.add(controls, 'teacherFlameY', -800, 800).onChange(function(value) {
					teacherFlame.position.y = value;
					localStorage.setItem('teacherFlameY', value)
				}).name('Y移动');
				var folder5 = gui.addFolder('速度');
				folder5.add(controls, 'speed_bixin', 0.00, 1.00).step(0.01).onChange(function(value) {
					localStorage.setItem('speed_bixin', value)
				}).name('比心');
				folder5.add(controls, 'speed_daiji', 0.00, 1.00).step(0.01).onChange(function(value) {
					localStorage.setItem('speed_daiji', value)
				}).name('待机');
				folder5.add(controls, 'speed_fanu', 0.00, 1.00).step(0.01).onChange(function(value) {
					localStorage.setItem('speed_fanu', value)
				}).name('发怒');
				folder5.add(controls, 'speed_jubei', 0.00, 1.00).step(0.01).onChange(function(value) {
					localStorage.setItem('speed_jubei', value)
				}).name('举杯');
				folder5.add(controls, 'speed_keai', 0.00, 1.00).step(0.01).onChange(function(value) {
					localStorage.setItem('speed_keai', value)
				}).name('可爱');
				folder5.add(controls, 'speed_ku', 0.00, 1.00).step(0.01).onChange(function(value) {
					localStorage.setItem('speed_ku', value)
				}).name('哭');
				folder5.add(controls, 'speed_shuohua', 0.00, 1.00).step(0.01).onChange(function(value) {
					localStorage.setItem('speed_shuohua', value)
				}).name('说话');

				// 渲染循环
				function render() {
					renderer.render(scene, camera);



					// console.log('-------------------======Y========--------------------')
					requestAnimationFrame(render);
				}
				render();

				if (that.edit == 1) {

					// console.log(1)
					document.getElementById('donghuaBox').style.visibility = "visible";
				} else {
					// console.log(22222)
					document.getElementById('donghuaBox').style.visibility = "hidden";
					// 隐藏 GUI
					gui.hide();
				}







				//创建TOP标签
				// var messageTagTop = tag("messageTagTop");
				// messageTagTop.position.y = controls.messageTagTopY;
				// scene.add(messageTagTop);

				//创建BOTTOM标签
				// var messageTagBottom = tag("messageTagBottom");
				// messageTagBottom.position.y = controls.messageTagBottomY;
				// scene.add(messageTagBottom);

				//创建进度条标签
				// var progressBarBoxTag = tag("progressBarBox");
				// progressBarBoxTag.position.x = controls.progressBarBoxTagX;
				// progressBarBoxTag.position.y = controls.progressBarBoxTagY;
				// scene.add(progressBarBoxTag);

				if ('实时通信') {
					// 创建一个名为 "myChannel" 的 Broadcast Channel
					const channel = new BroadcastChannel('myChannel');

					// 监听来自其他标签页的消息
					channel.onmessage = function(event) {
						// console.log('Message received in Tab 2:', event.data);
						if (event.data.key == 'reload') {
							window.location.reload();
						}

						if (event.data.key == 'loading') {
							loadIndex = layui.layer.msg('正在准备中，请稍后。。。', {
								icon: 16,
								shade: 0.01
							});
						}
						if (event.data.key == 'loaded') {
							layui.layer.close(loadIndex)
						}

						// 播放冠军动画
						if (event.data.key == 'guanjun-start') {
							setTimeout(function() {
								that.playAnimation('donghua_jubei');
							})
						}

						// 停止冠军动画
						if (event.data.key == 'guanjun-stop') {
							setTimeout(function() {
								that.playAnimation('donghua_daiji');
							})
						}

						// 30秒提示
						if (event.data.key == 'timeTip') {
							setTimeout(function() {
								that.playAnimation('donghua_fanu');
							})
							document.getElementById('timeTag').style.visibility = "visible";
							setTimeout(function() {
								document.getElementById('timeTag').style.visibility = "hidden";
							}, 3000)
						}

						if (event.data.key == 'changeBigScreen') {
							var params = [
								'season=' + event.data.season,
								'level=' + event.data.level,
								'groupStr=' + event.data.groupStr,
								'isCarousel=false',
							];

							// 获取当前网址
							const currentUrl = window.location.href;
							// 判断当前网址是否包含特定字符串
							if (currentUrl.includes('test.erp.spbcn.org')) {
								window.location.href = "https://test.erp.spbcn.org/#/screen/finalScreenRank?" + params
									.join('&');
							} else {
								window.location.href = "https://erp.spbcn.org/#/screen/finalScreenRank?" + params.join(
									'&');
							}
							return false;
						}

						// 列表里面点击开始['开始测试否']
						if (event.data.key == 'test_status') {
							that.playAnimation('donghua_daiji')
							scene.background = bgtextureLoader.load('https://cdn.spbcn.org/jzy/app/test_' +
								event.data.tag + '.png');

							if (event.data.tag && event.data.tag == 'starting') {
								document.getElementById(`bottomLetterBox`).innerHTML = '请等待作答。。。';
							}
						}

						// 桌子灯
						if (event.data.key == 'table_bg') {
							document.getElementById('table_bg').style.backgroundImage = "url(./image/" + event.data
								.tag + ".png)";
						}

						// 设置时间进度条相关信息
						if (event.data.key == 'time') {
							document.getElementById('progressBarInner').style.width = (parseInt(event.data.value) /
								60 * 100) + '%';
							document.getElementById('currentTime').innerHTML = parseInt(event.data.value) + 's';
						}

						// 设置轮次
						if (event.data.key == 'currentLevel') {
							// layer.msg(event.data.tag)
							document.getElementById('currentLevel').innerHTML = event.data.tag;
						}

						// 设置组别
						if (event.data.key == 'currentZubie') {
							document.getElementById('currentZubie').innerHTML = event.data.tag.ch;
							document.getElementById('currentZubieEn').innerHTML = event.data.tag.en;
						}

						if (event.data.key == 'config') {
							// 单词
							if (event.data.keyword) {
								document.getElementById('bottomLetterBox1').innerHTML = event.data.keyword + '';
								document.getElementById('bottomLetterBox3').innerHTML = event.data.keyword + '';
								document.getElementById('keywordHelperLetter').innerHTML = event.data.keyword + '';

								document.getElementById('spellingBottomContentBox3').style.width = document
									.getElementById('keywordHelperLetter').offsetWidth + 'px';

								// 设置右中效果的宽度
								document.getElementById('spellingBottomContentBox1').style.width = document
									.getElementById('bottomHelperShow').offsetWidth + 'px'; //绿色

								//最下：设置左移动
								if (document.getElementById('keywordHelperLetter').offsetWidth > ((window.innerWidth -
										500) / 2 - 280)) {
									document.getElementById('messageTagBottom1').style.visibility = "hidden";
									document.getElementById('messageTagBottom3').style.visibility = "visible";
									// layer.msg('大了' + document.getElementById('keywordHelperLetter').offsetWidth +"---"+ ((window.innerWidth-500)/2-280))
								} else {
									document.getElementById('messageTagBottom1').style.visibility = "visible";
									document.getElementById('messageTagBottom3').style.visibility = "hidden";
									// layer.msg('相等'+ document.getElementById('keywordHelperLetter').offsetWidth +"---"+ ((window.innerWidth-500)/2-280))
								}
							}

							// 设置中间的气泡最大宽度，大于此宽度则下沉
							document.getElementById('bottomHelperShow').style.maxWidth = (window.innerWidth - 500) /
								2 - 280 + 'px';
							document.getElementById('keywordHelperShow').style.maxWidth = (window.innerWidth - 500) /
								2 - 280 + 'px';

							// 重置时间
							document.getElementById('currentTime').innerHTML = '60s';
							document.getElementById('progressBarInner').style.width = '100%';

							// 隐藏标签|重置图标
							document.getElementById('resultTipIcon').style.backgroundImage =
								"url(./image/donghua/face.png)";
							document.getElementById('resultTipIcon2').style.backgroundImage =
								"url(./image/donghua/face.png)";
							document.getElementById('bottomLetterBox').innerHTML = '请等待作答。。。';
							document.getElementById('bottomLetterBox2').innerHTML = '请等待作答。。。';
							document.getElementById('bottomHelperLetter').innerHTML = '请等待作答。。。'; //绿色
							document.getElementById('bottomHelperLetter1').innerHTML = '请等待作答。。。';
							document.getElementById('messageTagBottom').style.visibility = "hidden";
							document.getElementById('messageTagBottom1').style.visibility = "hidden";
							document.getElementById('messageTagBottom2').style.visibility = "hidden";
							document.getElementById('messageTagBottom3').style.visibility = "hidden";
							document.getElementById('bottomLetterBox').style.fontSize = fontSize + 'px';
							document.getElementById('bottomLetterBox2').style.fontSize = fontSize + 'px';
							document.getElementById('bottomHelperLetter').style.fontSize = fontSize + 'px';
							document.getElementById('bottomHelperLetter1').style.fontSize = fontSize + 'px';

							document.getElementById('bottomLetterBox').style.color = 'black';
							document.getElementById('bottomLetterBox1').style.color = 'blue';
							document.getElementById('bottomLetterBox2').style.color = 'black';
							document.getElementById('bottomLetterBox3').style.color = 'blue';

							document.getElementById('bottomLetterBox').style.left = "0px";
							document.getElementById('bottomLetterBox2').style.left = "0px";

							// 初始化默认值
							fontSize = event.data.fontSize;
							// topMaxWidth=window.innerWidth-150;
							// bottomMaxWidth=window.innerWidth-150;

							// bottom气泡
							// document.getElementById('spellingBottomContentBox').style.width = `300px`;
							// document.getElementById('bottomHelperShow').style.maxWidth = bottomMaxWidth+"px";
							// document.getElementById('topHelperShow').style.maxWidth = topMaxWidth+"px";
						}

						// 判断结果
						if (event.data.key == 'result') {
							if (event.data.value == 'success') {
								setTimeout(function() {
									that.playAnimation('donghua_jubei');
								})
								// layer.msg('success')
								document.getElementById('resultTipIcon').style.backgroundImage =
									"url(./image/donghua/success.png)";
								document.getElementById('resultTipIcon1').style.backgroundImage =
									"url(./image/donghua/success.png)";
								document.getElementById('resultTipIcon2').style.backgroundImage =
									"url(./image/donghua/success.png)";

								document.getElementById('messageTagBottom1').style.visibility = "hidden";

								document.getElementById('bottomLetterBox').style.color = 'blue';
								// document.getElementById('bottomLetterBox1').style.color = 'blue';
								document.getElementById('bottomLetterBox2').style.color = 'blue';
							}

							// 显示2秒，过渡
							if (event.data.value == 'error') {
								setTimeout(function() {
									that.playAnimation('donghua_ku');
								})
								// layer.msg('error')
								document.getElementById('resultTipIcon').style.backgroundImage =
									"url(./image/donghua/error.png)";
								document.getElementById('resultTipIcon2').style.backgroundImage =
									"url(./image/donghua/error.png)";

								document.getElementById('messageTagBottom1').style.visibility = "hidden";

								document.getElementById('bottomLetterBox').style.color = 'red';
								// document.getElementById('bottomLetterBox1').style.color = 'blue'
								document.getElementById('bottomLetterBox2').style.color = 'red';
							}

							// 显示错误
							if (event.data.value == 'error2') {
								// layer.msg('error2')
								document.getElementById('resultTipIcon').style.backgroundImage =
									"url(./image/donghua/error.png)";
								document.getElementById('resultTipIcon2').style.backgroundImage =
									"url(./image/donghua/error.png)";

								document.getElementById('messageTagBottom').style.visibility = "hidden";
								document.getElementById('messageTagBottom2').style.visibility = "hidden";

								document.getElementById('bottomLetterBox').style.color = 'red';
								document.getElementById('bottomLetterBox2').style.color = 'red';

								// 单词
								if (event.data.keyword) {
									document.getElementById('bottomLetterBox1').innerHTML = event.data.keyword + '';
									document.getElementById('bottomLetterBox3').innerHTML = event.data.keyword + '';
									document.getElementById('keywordHelperLetter').innerHTML = event.data.keyword + '';

									document.getElementById('spellingBottomContentBox3').style.width = document
										.getElementById('keywordHelperLetter').offsetWidth + 'px';

									//最下：设置左移动
									if (document.getElementById('keywordHelperLetter').offsetWidth > ((window
											.innerWidth - 500) / 2 - 280)) {
										document.getElementById('messageTagBottom1').style.visibility = "hidden";
										document.getElementById('messageTagBottom3').style.visibility = "visible";
										// layer.msg('大了' + document.getElementById('keywordHelperLetter').offsetWidth +"---"+ ((window.innerWidth-500)/2-280))
									} else {
										document.getElementById('messageTagBottom1').style.visibility = "visible";
										document.getElementById('messageTagBottom3').style.visibility = "hidden";
										// layer.msg('相等'+ document.getElementById('keywordHelperLetter').offsetWidth +"---"+ ((window.innerWidth-500)/2-280))
									}
								}
							}
						}

						// 老师
						if (event.data.key == 'teacher') {
							if (event.data.tag == 'startPlay') {
								shuohua_status = true;
								// console.log('开始说话')

								setTimeout(function() {
									that.playAnimation('donghua_shuohua');
								})
							}
							if (event.data.tag == 'stopPlay') {
								shuohua_status = false;
							}
						}

						if (event.data.key == 'qipaoInit') {
							// 设置最大值，超过最大值，就要显示下沉效果
							document.getElementById('bottomHelperShow').style.maxWidth = document.getElementById(
								'spellingBottomContentBox').offsetWidth + 'px';
							// layer.msg('设置成功'+document.getElementById('spellingBottomContentBox').offsetWidth)

							document.getElementById('messageTagBottom').style.visibility = 'hidden';
							document.getElementById('messageTagBottom1').style.visibility = 'hidden';
							document.getElementById('messageTagBottom2').style.visibility = 'hidden';
						}

						//学生作答：键盘输入
						if (event.data.key == 'student') {
							//隐藏标签
							// document.getElementById('messageTagBottom').style.visibility = "visible";
							// messageTagBottom.element.style.visibility = 'hidden';

							// 输入的字符串内容
							var content = event.data.value;
							if (content == '') {
								return false;
							}
							if (content.length == 1) {
								document.getElementById('messageTagBottom').style.visibility = 'visible';
							}

							// layer.msg('currentBottomDivWidth : '+document.getElementById('spellingBottomContentBox').width+'  '+document.getElementById('bottomHelperShow').style.maxWidth+'px');
							if ('bottom') {
								// 先赋值，再调样式
								document.getElementById('bottomLetterBox').innerHTML = content;
								document.getElementById('bottomLetterBox2').innerHTML = content;
								document.getElementById('bottomHelperLetter').innerHTML = content; //绿色
								document.getElementById('bottomHelperLetter1').innerHTML = content;

								// 设置左中效果的宽度
								document.getElementById('spellingBottomContentBox').style.width = document
									.getElementById('bottomHelperShow').offsetWidth + 'px'; //绿色

								// 设置下沉效果的宽度
								document.getElementById('spellingBottomContentBox2').style.width = document
									.getElementById('bottomHelperShow1').offsetWidth + 'px';


								//最下：设置左移动
								var totalWidth = document.getElementById('bottomHelperLetter1').offsetWidth; //粉色的
								var contentWidth = document.getElementById('spellingBottomContentBox2')
									.offsetWidth; //最下面的
								var diffWidth = totalWidth - contentWidth;
								if (diffWidth > 0) {
									document.getElementById('bottomLetterBox2').style.left = -diffWidth + "px";
								}

								//左中：设置左移动
								var currentBottomDivWidth = document.getElementById('bottomHelperShow1').offsetWidth;
								var currentBottomSpanWidth = document.getElementById('bottomHelperShow').offsetWidth;
								var diffWidth2 = currentBottomDivWidth - currentBottomSpanWidth;
								if (diffWidth2 > 0) {
									//左中隐藏，下面的显示
									// layer.msg('aaa')
									document.getElementById('messageTagBottom').style.visibility = 'hidden';
									document.getElementById('messageTagBottom2').style.visibility = 'visible';
									document.getElementById('bottomLetterBox').style.left = -(currentBottomDivWidth -
										currentBottomSpanWidth) + "px";
								}
							}
						}
					};
				}

				// 画布跟随窗口变化
				window.onresize = function() {
					const width = window.innerWidth;
					const height = that.canvasheight;

					// cnavas画布宽高度重新设置
					renderer.setSize(width, height);
					camera.aspect = width / height;
					camera.updateProjectionMatrix();
				};


				// js 随机获取一个字母
				function getRandomLetter() {
					const lowerCaseLetters = 'abcdefghijklmnopqrstuvwxyz';
					const upperCaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
					const randomIndex = Math.floor(Math.random() * 26);
					const isUpperCase = Math.random() >= 0.5; // 50% chance of uppercase
					const letters = isUpperCase ? upperCaseLetters : lowerCaseLetters;

					return letters[randomIndex];
				}

				function getMeshWidth(mesh) {
					let width = 0;

					// 根据不同几何体类型获取宽度
					if (mesh.geometry instanceof THREE.BoxGeometry) {
						// 如果是 BoxGeometry，获取 width 属性
						width = mesh.geometry.parameters.width;
					} else if (mesh.geometry instanceof THREE.PlaneGeometry) {
						// 如果是 PlaneGeometry，获取 width 属性
						width = mesh.geometry.parameters.width;
					} // 其他类型的几何体可以根据需要添加判断

					return width;
				}

				function getCSS2DObjectWidth(css2DObject) {
					// 获取 CSS2DObject 对应的 HTML 元素
					const htmlElement = css2DObject.element;

					// 获取 HTML 元素的宽度
					const width = htmlElement.offsetWidth;

					return width;
				}

				function getCSS2DObjectHeight(css2DObject) {
					// 获取 CSS2DObject 对应的 HTML 元素
					const htmlElement = css2DObject.element;

					// 获取 HTML 元素的宽度
					const height = htmlElement.offsetHeight;

					return height;
				}
			},

			// 切换播放动画
			playAnimation(animationName) {
				var that = this;

				if (animationName == '') {
					animationName = 'donghua_daiji';
				}

				const animation = animations[animationName];
				teacherFlame.material = animation.material;

				that.stopAnimation(); // 停止当前动画的播放

				let currentFrame = animation.startFrame;
				const animate = () => {
					// console.log('animationName', animationName)
					if (animationName == 'donghua_bixin') {
						currentFrame += controls.speed_bixin;
					}
					if (animationName == 'donghua_daiji') {
						currentFrame += controls.speed_daiji;
					}
					if (animationName == 'donghua_fanu') {
						currentFrame += controls.speed_fanu;
					}
					if (animationName == 'donghua_jubei') {
						currentFrame += controls.speed_jubei;
					}
					if (animationName == 'donghua_keai') {
						currentFrame += controls.speed_keai;
					}
					if (animationName == 'donghua_ku') {
						currentFrame += controls.speed_ku;
					}
					if (animationName == 'donghua_shuohua') {
						currentFrame += controls.speed_shuohua;
					}

					if (currentFrame > animation.endFrame) {
						if (animation.onEnd) {
							animation.onEnd();
						}
						currentFrame = animation.startFrame;
						if (animation.onStart) {
							animation.onStart();
						}
					}
					teacherFlame.material.map.offset.x = Math.floor(currentFrame) / animation.endFrame;
					currentAnimationId = requestAnimationFrame(animate);
				};

				animate();
			},

			// 停止当前动画的播放
			stopAnimation() {
				cancelAnimationFrame(currentAnimationId);
			},

			// donghua_bixin() {
			// 	var that = this;
			// 	setTimeout(function() {
			// 		that.playAnimation('donghua_bixin');
			// 	})
			// },

			// document.getElementById('donghua_bixin').addEventListener('click', function(event) {
			// 	setTimeout(function() {
			// 		playAnimation('donghua_bixin');
			// 	})
			// });
			// document.getElementById('donghua_daiji').addEventListener('click', function(event) {
			// 	setTimeout(function() {
			// 		playAnimation('donghua_daiji');
			// 	})
			// });
			// document.getElementById('donghua_fanu').addEventListener('click', function(event) {
			// 	setTimeout(function() {
			// 		playAnimation('donghua_fanu');
			// 	})
			// });
			// document.getElementById('donghua_jubei').addEventListener('click', function(event) {
			// 	setTimeout(function() {
			// 		playAnimation('donghua_jubei');
			// 	})
			// });
			// document.getElementById('donghua_keai').addEventListener('click', function(event) {
			// 	setTimeout(function() {
			// 		playAnimation('donghua_keai');
			// 	})
			// });
			// document.getElementById('donghua_ku').addEventListener('click', function(event) {
			// 	setTimeout(function() {
			// 		playAnimation('donghua_ku');
			// 	})
			// });
			// document.getElementById('donghua_shuohua').addEventListener('click', function(event) {
			// 	setTimeout(function() {
			// 		playAnimation('donghua_shuohua');
			// 	})
			// });

		}
	}
</script>

<style>
	page {
		overflow: hidden;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.mifengCanvasBox {
		background-color: #fff;
		border-radius: 40rpx;
		margin: 0 auto;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>